<template>
	<view class="jet">
		<view class="top" src="/static/bg.png">
			<view class="htitle">Remove Account</view>
			<view class="middle">
				<image class="middle-logo" src="/static/p2y.png"></image>
				<image class="middle-name" src="/static/peso2you.png"></image>
			</view>
			<view class="content">
				<view class="content-view">
					<image class="content-view-left" src="/static/gq.png"></image>
					<view class="content-view-qh">+63</view>
					<input type="number" maxlength="10" class="content-view-text ml60" placeholder="9XXXXXXXXX"
						v-model="phone" />
				</view>
				<view class="content-view mt24">
					<input type="number" :password="showEye" maxlength="6" placeholder="Enter 6-digit password"
						class="content-view-text" v-model="user_password" />
					<image @click="p2y" class="content-view-right" :src="showEye ? '/static/1.png':'/static/2.png'">
					</image>
				</view>
			</view>
			<view class="btn" @click="delP2y">
				REMOVE
			</view>
		</view>
		<view v-if="0">
			<view class="content">
				<view class="dialog">
					<view id="colorBg" class="colorBg" @touchstart="startTouch" @touchmove="moveIng"
						@touchend="endTouch">
						<view class="roundBuff" :catchtouchmove="true" @c.stop="() => {}"
							:style="'transform:rotate(' + degrees + 'deg)'"></view>
						<view class="colorPan" :style="'color:' + getColorByDeg(this.degrees)">
							{{ "HSL:" + degrees.toFixed(0) }}
						</view>
					</view>
					<view class="flex" style="margin-top: 100rpx">
						<button class="lee_btn" type="default">取消</button>
						<button class="lee_btn" type="default">确认</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				user_password: '',
				showEye: true,
				pointerShow: true,
				colorPanWidth: 20,
				colorPanRadius: 0,
				pointerBox: {},
				degrees: 0,
			}
		},
		methods: {
			delP2y() {
				if (this.phone.length == 0) {
					return uni.showToast({
						title: 'Please Enter phone number',
						icon: 'none'
					})
				}
				if (this.user_password.length == 0) {
					return uni.showToast({
						title: 'Please Enter 6-digit password',
						icon: 'none'
					})
				}

				uni.showLoading({
					title: 'loading...',
					mask: true
				})
				const _this = this
				uni.request({
					url: 'https://app.peso2you.com/Py/Login/delete_user_data',
					method: 'POST',
					data: {
						mobile: this.phone,
						user_password: this.user_password
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					console.log("res===", res);
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: res.data.response_msg
					})
					_this.phone = ''
					_this.user_password = ''
				}).catch(e => {
					console.log("e===", e);
					uni.hideLoading()
				})

			},
			p2y() {
				this.showEye = !this.showEye
			},
			startTouch(e) {
				const {
					pageX,
					pageY
				} = e.touches[0];
				this.rotatePointer(pageX, pageY);
			},
			endTouch(e) {
				const {
					pageX,
					pageY
				} = e.changedTouches[0];
				this.rotatePointer(pageX, pageY);
			},
			moveIng(e) {
				const {
					pageX,
					pageY
				} = e.touches[0];
				this.rotatePointer(pageX, pageY);
			},
			rotatePointer(pageX = 0, pageY = 0) {
				const {
					pointerBox,
					colorPanWidth
				} = this;
				const mouseX = pageX - colorPanWidth;
				const mouseY = pageY - colorPanWidth;
				var centerY = pointerBox.top + pointerBox.height / 2 - 0,
					centerX = pointerBox.left + pointerBox.height / 2 - 0,
					radians = Math.atan2(mouseX - centerX, mouseY - centerY);
				this.degrees = radians * (180 / Math.PI) * -1 + 180;
			},
			/**
			 * 根据角度获取对应的颜色值
			 * @param {number} degree - 角度值，取值范围为[0, 360)
			 * @param {number} alpha - alpha 通道值，取值范围为[0, 1]
			 */
			getColorByDeg(degree, alpha = 1) {
				if (degree === undefined) return "rgba(0, 0, 0, 0)";
				if (degree < 0 || degree >= 360) return "rgba(0, 0, 0, 0)";
				if (alpha < 0 || alpha > 1) return "rgba(0, 0, 0, 0)";
				const h = degree / 360;
				const s = 1;
				const l = 0.5;
				const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
				const p = 2 * l - q;
				const hk = h + 1 / 3;
				const tr = hk < 0 ? hk + 1 : hk > 1 ? hk - 1 : hk;
				const tg = h;
				const tb = h - 1 / 3;
				const r = Math.round(this.hue2rgb(p, q, tr) * 255);
				const g = Math.round(this.hue2rgb(p, q, tg) * 255);
				const b = Math.round(this.hue2rgb(p, q, tb) * 255);
				return `rgba(${r}, ${g}, ${b}, ${alpha})`;
			},
			hue2rgb: (p, q, t) => {
				if (t < 0) t += 1;
				if (t > 1) t -= 1;
				if (t < 1 / 6) return p + (q - p) * 6 * t;
				if (t < 1 / 2) return q;
				if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
				return p;
			},
		}
	}
</script>

<style scoped lang="scss">
	.jet {
		width: 100vw;
		min-height: 100vh;
	}

	.top {
		background-image: url(/static/bg.png);
		background-size: 100% 100%;
		width: 750rpx;
		height: 750rpx;
		padding-top: 30rpx;
		box-sizing: border-box;

	}

	.htitle {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 18px;
		color: #fff;
		text-align: center;
		font-style: normal;
		text-transform: none;
		flex: 1;
		line-height: 46rpx;
		height: 46rpx;

	}


	.middle-logo {
		margin-top: 2rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 30rpx;
		border: 1px solid #fff;
	}

	.middle-name {
		padding-top: 50rpx;
		height: 40rpx;
		width: 160rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 24px;
		text-align: center;
		font-style: normal;
	}

	.middle {
		margin-top: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.content {
		margin-top: 0rpx;
		width: 100vw;
		height: 234px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.mt24 {
			margin-top: 34rpx;
		}

		.ml60 {
			margin-left: 60rpx;
		}

		&-view {
			width: calc(100vw - 100rpx);
			margin: 0 50rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 1px solid #EEEEEE;
			display: flex;
			flex-direction: row;
			padding: 0rpx 28rpx;

			&-left {
				width: 60rpx;
				height: 40rpx;
				margin-top: 27rpx;
			}

			&-qh {
				margin-left: 12rpx;
				width: 56rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 15px;
				color: #333333;
				line-height: 96rpx;
				height: 96rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			&-text {
				margin: 25rpx 0rpx;
				height: 46rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #8E8E8E;
				flex: 1;
			}

			&-right {
				width: 40rpx;
				height: 40rpx;
				margin-top: 28rpx;
			}
		}
	}

	.btn {
		margin: 90rpx 50rpx 0rpx;
		height: 96rpx;
		background: linear-gradient(135deg, #8A65FF 0%, #695AF7 100%);
		border-radius: 28rpx;

		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.tst {

		.dialog {
			display: block;
			border-radius: 30rpx;
			background-color: #303030;
			margin: 20rpx;
			padding: 30rpx;
		}

		.flex {
			display: flex;
			justify-content: space-between;
		}

		.colorBg {
			width: 80vw;
			height: 80vw;
			margin: 5vw;
			background: conic-gradient(red, yellow, green, cyan, blue, magenta, red);
			border-radius: 50%;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.roundBuff {
			width: 55vw;
			height: 55vw;
			-webkit-transform-origin: center 50%;
			transform-origin: center 50%;
			background: #303030;
			border-radius: 50%;
		}

		.roundBuff::before {
			content: "";
			width: 15px;
			height: 15px;
			background: #303030;
			border: solid #303030;
			border-width: 10px 10px 0 0;
			transform: translate(-50%, -50%) rotate(-45deg);
			position: absolute;
			left: 50%;
			top: 2%;
		}

		.lee_btn {
			background: #00000000;
			color: #ffffff;
			width: 36%;
			height: 80rpx;
			line-height: 70rpx;
			text-align: center;
			justify-content: center;
			font-size: 30rpx;
			border-radius: 50rpx;
			border: 5rpx #ffffff solid;
			font-weight: bold;
			padding: 1px 20px;
		}

		.colorPan {
			position: absolute;
			color: #ffffff;
		}
	}
</style>